import * as map from './map.js';

const blockWidth = 45;
const blockHeight = 45;


var div = document.querySelector('#game')

/**
 *设置div容器的宽高
 *
 */
function setDivContainer() {
    div.style.width = map.colNumber * blockWidth + 'px';
    div.style.height = map.rowNumber * blockHeight + 'px';
}

/**
 *判断箱子位置是否在正确的位置
 *
 */
function isCorrent(row, col) {
    for (var i = 0; i < map.correct.length; i++) {
        var p = map.correct[i];
        if (p.row === row && p.col === col) {
            return true;
        }
    }
    return false;
}



/**
 *
 *根据对应的值渲染相应的图片
 * @param {*} row
 * @param {*} col
 * @return {*} 
 */
function renderContent(row, col) {
    var divs = document.createElement('div');
    divs.className = 'item';

    var value = map.content[row][col];
    if (value === map.WALL) {
        divs.classList.add('wall');
    } else if (value === map.PLAYER) {
        divs.classList.add('player');
    } else if (value === map.BOX) {
        // 判断箱子位置是否在正确的位置
        if (isCorrent(row, col)) {
            divs.classList.add('correct-box');
        } else {
            divs.classList.add('box');
        }
    } else if (value === map.SPACE) {
        if (isCorrent(row, col)) {
            divs.classList.add('correct');
        } else {
            return false;
        }

    }
    divs.style.left = col * blockWidth + 'px';
    divs.style.top = row * blockHeight + 'px';

    div.appendChild(divs);
}

/**
 *渲染小方块内容
 *
 */
function setBlock() {
    div.innerHTML = '';// 每次渲染前都清空


    for (var row = 0; row < map.rowNumber; row++) {
        for (var col = 0; col < map.colNumber; col++) {
            // 根据对应的值渲染相应的图片
            renderContent(row, col);
        }
    }


}

export function showUi() {
    // 设置div宽高
    setDivContainer();
    // 渲染小方块内容
    setBlock();

}